<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>商品列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#"  prop="id" width="50">
				
			</el-table-column>
			<el-table-column width="580" label="" >
				<template slot-scope="scope">
					<el-table :data="scope.row.goodsList">
						<el-table-column prop="photo" label="商品">
							<template slot-scope="scope">
								<img :src="scope.row.img_md" min-width="80" height="80" />
							</template>
						</el-table-column>
						<el-table-column prop="name" label="" width="300"></el-table-column>
						<el-table-column prop="goods_price" label="单价"></el-table-column>
						<el-table-column prop="goods_num" label="数量"></el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column prop="payment" label="付款总额"></el-table-column>
			<el-table-column prop="create_time" label="下单时间" sortable> </el-table-column>
			<el-table-column prop="status" label="状态" sortable></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" plain></el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
	import { Order } from '@/api/';

	export default {
		data() {
			return {
				tableData: [{
					create_time:'',
					goodsList:[{
						goods_num:'',
						goods_price:'',
						id:'',
						img_md:'',
						name:'',
						order_id:''
					}],
					id:'',
					payment:'',
					status:''
				}]
			}
		},
		created() {
			this.loadList()
		},
		methods:{
			async loadList(){
			let {status,data} = await Order.list({pageSize:4,pageIndex:1,status:'all'})
				console.log(data[0].goodsList)
				this.tableData = data;
			}
		}
		
	}
</script>

<style lang="less" scoped>

</style>
